<template>
   <el-watermark
      :font="config.font"
      :content="config.content"
   >
    <div>
          <div class="handle-box">   
            <div class="text-center" >
            <br><br><br>
            <p style="font-size: 36px; padding-bottom: 20px;">萍乡学院学生数据统计表</p>
        </div>
        <div class="stuInfo text-center">
            学号：&nbsp;110&nbsp;&nbsp;&nbsp;&nbsp;姓名：&nbsp;张三&nbsp;&nbsp;&nbsp;&nbsp;院系：&nbsp;萍乡学院
         </div>
         <el-row class="top-btn">
            <el-button color="#0ab394" class="handle-btn"  @click="exportPDF">导出PDF</el-button>
         </el-row>
      </div> 
          <el-row>
            <el-text class="text-title">专业统计</el-text>
          </el-row>
          <el-divider/>
             <el-table 
                 :data="tableData"   
                 style="width: 85%;margin-left:65px ;" 
                size="small"
                border
                stripe 
               >
                <el-table-column  prop="id" label="序号"></el-table-column>
                <el-table-column  prop="class" label="所在班级"></el-table-column>
                <el-table-column  prop="major" label="所属专业"></el-table-column>
                <el-table-column  prop="scheme" label="培养计划"></el-table-column>
                <el-table-column  prop="start_time" label="开始时间"></el-table-column>
                <el-table-column  prop="end_time" label="结束时间"></el-table-column>
             </el-table>
             <el-row>
            <el-text class="text-title">学习进度</el-text>
          </el-row>
             <el-divider/>
             <el-table 
                 :data="studyProcessData"   
                 style="width: 85%;margin-left:65px;" 
                size="small"
                border
                stripe 
              
               >
                <el-table-column  prop="training" label="培养方案"></el-table-column>
                <el-table-column  prop="id" label="序号"></el-table-column>
                <el-table-column  prop="name" label="课程名称"></el-table-column>
                <el-table-column  prop="studyPro" label="学习进度"></el-table-column>
                <el-table-column  prop="homeworkPro" label="作业进度"></el-table-column>
                <el-table-column  prop="notes" label="笔记数"></el-table-column>
                <el-table-column  prop="sign" label="签到数"></el-table-column>
                <el-table-column  prop="question" label="提问数"></el-table-column>
                <el-table-column  prop="answer" label="回答数"></el-table-column>
             </el-table>
         <el-row>
            <el-text class="text-title">教师评语</el-text>
          </el-row>
             <el-divider ></el-divider>
      <el-dialog
               v-model="dialogVisible"
               title="导出"
               width="20%">
    <span>是否导出该学生的个人学习数据？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" @click="dialogVisible = false">取消</el-button>
        <el-button color="#0AB394" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
          <!-- </div> -->
       </div>
      </el-watermark>  
    </template>
    
<script setup lang="ts">
import { ref, reactive,watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getTableData,getTableDataStudy} from '../../api/analysis' ;

const config = reactive({
//   content:['乐码智慧平台','学生数据统计表','苏州快程乐码信息技术有限公司'] ,
  content:['乐码智慧平台'] ,
  font: {
    fontSize: 16,
    fontFamily:'Times New Roman',
    fontWeight:'bold',
    color: 'rgba(0, 0, 0, 0.15)',
  },    
  zIndex: -1,
  rotate: -22,
  gap: [100, 100] as [number, number],
  offset: [] as unknown as [number, number],
})
    //专业统计数据
    const tableData = ref();
    //学习进度数据
    const studyProcessData = ref()
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getTableData().then(res=>{
         tableData.value = res.data
           
        })
        getTableDataStudy().then(res=>{
            studyProcessData.value=res.data
        })
    };
    getData();
  
   const dialogVisible = ref(false)
    const exportPDF=()=>{
      dialogVisible.value=true
    }
    
    
    </script >
    <style lang="less" scoped>
    .text-center{
      text-align: center;
    }
    .stuInfo{
      font-size: 16px;
    }
    .text-title{
      font-size: 28px;
      padding-left: 65px;
      font-family:'新宋体';
      margin-top: 30px;
    }
    .table {
       width: 100%;
       font-size: 14px;
    }
   .top-btn{
      float: right;
      padding-right: 65px;
   }
    .table-td-thumb {
       display: block;
       margin: auto;
       width: 40px;
       height: 40px;
    }
    .cell{
        display: inline-block;
        .el-button{
            margin-left: 0px;
        }
    }
    .el-col {
      border-radius: 4px;
      margin-left: 10px;
    }
   
    
    
    </style>